<template>
  <div>
    <div class="table-box">
      <!-- 表格部分 -->
      <el-table :data="tableData" style="width: 100%" ref="table">
        <el-table-column
          prop="id"
          label="模板ID"
          min-width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="模板名称"
          min-width="100"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="isSending"
          label="是否发送"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isSending"
              active-color="#1dc8a4"
              @change="changeSendStatus(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column
          label="最新编辑时间"
          prop="lastOperatingTime"
          min-width="100"
          align="center"
        >
        </el-table-column>

        <el-table-column
          label="操作人"
          prop="lastOperatingName"
          min-width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" min-width="100" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="compile(scope.row)">
              编辑
            </el-button>
            <el-button type="text" @click="viewDetail(scope.row)">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>

    <!-- 是否发送 确认弹框 -->
    <el-dialog
      title="提示"
      width="30%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="false"
    >
      <span>{{ dialogText }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="handleCancel">取 消</el-button>
        <el-button type="success" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { filterImageMixins } from '@/mixins/filterImage'
import { templateList, updateOpenStatus } from '@/api/notice'
import { packagingMethods } from './minix.js'
import { saveScrollMixins } from '@/mixins/saveScroll'

const dir = [
  // * 生日关怀
  { template: 'BIRTHDAY_CARE_MESSAGE_TEMPLATE', page: 'birthdayCare' },
  // * 冻结积分
  { template: 'FREEZE_POINTS_MESSAGE_TEMPLATE', page: 'freezingPoints' },
  // * 奖励积分
  { template: 'BONUS_POINTS_MESSAGE_TEMPLATE', page: 'bonusPoints' },
  // * 修改积分
  { template: 'MODIFY_POINTS_MESSAGE_TEMPLATE', page: 'modifyPoints' },
  // * 新人注册发券
  {
    template: 'NEWCOMER_REGISTRATION_VOUCHER_MESSAGE_TEMPLATE',
    page: 'newRegCoupons'
  },
  // * 领取新人大礼包发券
  {
    template: 'RECEIVE_NEWCOMER_PACKAGE_COUPON_MESSAGE_TEMPLATE',
    page: 'getNewGifts'
  },
  // * 购买课程发券
  {
    template: 'PURCHASE_COURSE_VOUCHER_MESSAGE_TEMPLATE',
    page: 'buyCourseCoupons'
  },
  // * VIP服务期续费发券
  {
    template: 'VIP_SERVICE_PERIOD_RENEWAL_VOUCHER_MESSAGE_TEMPLATE',
    page: 'serviceFeeCoupons'
  },
  //  * 顾问手动发券
  {
    template: 'ADVISORS_MANUALLY_SEND_VOUCHER_MESSAGES_TEMPLATE',
    page: 'counselorCoupons'
  },
  //  * 优惠券到期
  {
    template: 'COUPON_EXPIRATION_MESSAGE_TEMPLATE',
    page: 'couponsEnd'
  },
  //  * 积分到期
  { 
    template: 'POINTS_EXPIRATION_MESSAGE_TEMPLATE',
    page: 'IntegralEnd'
  },
  // 鲜花活动
  { 
    template: 'FLOWER_ACTIVITY_AWARD_MESSAGE_TEMPLATE',
    page: 'flowerActiveMsg'
  },
  // 营课短信消息
  { 
    template: 'CAMP_LESSON_TEMPLATE',
    page: 'campSms'
  }

]

export default {
  mixins: [filterImageMixins, saveScrollMixins, packagingMethods],
  data() {
    return {
      tableData: [],
      total: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 状态修改
      dialogVisible: false,
      dialogText: '',
      selectRowId: '',
      selectRowStatus: ''
    }
  },
  created() {},
  mounted() {
    this.searchList()
  },
  methods: {
    compile(val) {
      const obj = dir.find((ele) => {
        return val.messageTemplateAlias === ele.template
      })

      this.$router.push({
        name: `wh:${obj.page}`,
        query: { id: val.id, edit: false }
      })
    },

    viewDetail(val) {
      const obj = dir.find((ele) => {
        return val.messageTemplateAlias === ele.template
      })

      this.$router.push({
        name: `wh:${obj.page}`,
        query: { id: val.id, edit: true }
      })
    },

    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 获取列表 */
    searchList() {
      let params = { type: 'SYSTEM_TEMPLATE', ...this.searchParams }
      templateList(
        params,
        (res) => {
          this.total = res.total
          res.rows.forEach((item) => {
            item.lastOperatingTime = item.lastOperatingTime
              ? item.lastOperatingTime
              : item.createdTime
          })
          this.tableData = res.rows
        },
        (err) => {
          this.$message({
            message: err.message,
            type: 'warning'
          })
        }
      )
    },
    // 改变“是否发送”状态
    changeSendStatus(obj) {
      // 阻止switch切换
      this.tableData.forEach((ele) => {
        if (ele.id === obj.id) {
          ele.isSending = !obj.isSending
        }
      })

      // 切换提示文案
      if (!obj.isSending) {
        this.dialogText =
          '打开后将会向学员发送消息，影响所有学员，产生费用，确定发送此消息吗？'
      } else {
        this.dialogText = '关闭后学员无法接收此消息，确定关闭发送此消息吗？'
      }

      // 显示dialog
      this.selectRowId = obj.id
      this.selectRowStatus = obj.isSending
      this.dialogVisible = true
    },

    // 处理取消事件
    handleCancel() {
      this.dialogVisible = false
    },

    // 处理确定事件
    handleConfirm() {
      let obj = { openStatus: !this.selectRowStatus, isQueryString: true }
      updateOpenStatus(
        this.selectRowId,
        obj,
        (res) => {
          this.$message({ message: '修改成功', type: 'success' })
          this.searchList()
        },
        (err) => {
          this.$message({ message: err.message, type: 'warn' })
        }
      )

      this.dialogVisible = false
    }
  }
}
</script>
